.pages {
    width: 100%;
    height: 100%;
    // background-color: white;
    padding: 10px 0;
    // background-color: white;
    display: flex;
    flex-direction: column;
    padding: 5px;

    :global {


        .header-action {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            border-bottom: 1px solid #b4b4b444;

            .select-bucket {}

            .button-action {}
        }

        .center {
            width: 100%;
            flex: 1;
            display: flex;

            .left-cate {
                width: 230px;
                height: 100%;
                padding: 5px;
                border-right: 1px solid #b4b4b444;

                .cate-list {
                    // background-color: rgba(230, 230, 230, 0.443);
                    padding: 5px;





                    .cate-list-container {
                        width: 100%;

                        padding: 5px;

                        .cate-item {
                            padding: 5px;
                            width: 100%;
                            border-bottom: 1px solid #b4b4b444;

                            .cate-item-container {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                .name {}

                                .action {}
                            }

                        }
                    }
                }
            }

            .right-image-container {
                flex: 1;
                padding: 5px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                
               

                .image-list {
                    flex: 1;
                    width: 100%;
                    padding: 5px;
                    overflow-y: auto;

                    .list-scroll {
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;

                        .image-list-container {
                            // padding: 5px;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: start;
                            justify-content: flex-start;
                            justify-items: start;

                            .image-card {
                                min-width: 185px;
                                max-width: 20%;
                                padding: 5px;
                                margin-bottom: 5px;

                                .box {

                                    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .1);
                                    border-radius: 5px;

                                    .image-container {
                                        width: 100%;
                                        height: 100px;
                                        overflow: hidden;
                                        display: flex;
                                        align-items: center;
                                        position: relative;

                                        .img {
                                            padding: 5px;
                                            max-height: 100%;
                                            max-height: 100%;
                                        }

                                        .img-mask {
                                            display: none;
                                            position: absolute;
                                            width: 100%;
                                            height: 100%;

                                            // background-color: rgba(0, 0, 0, 0.269);
                                            cursor: pointer;

                                            .mask-container {
                                                width: 100%;
                                                height: 100%;
                                                // padding: 5px;
                                                display: flex;
                                                flex-direction: column;
                                                justify-content: space-between;

                                                .header {
                                                    width: 100%;
                                                    display: flex;
                                                    padding: 0 5px;
                                                    justify-content: flex-end;

                                                    .check {}
                                                }

                                                .bottom {
                                                    width: 100%;
                                                    position: relative;
                                                    height: 30px;

                                                    .background {
                                                        position: absolute;
                                                        top: 0;
                                                        left: 0;
                                                        width: 100%;
                                                        height: 100%;
                                                        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.114));

                                                        // background-color: rgba(0, 0, 0, 0.705);
                                                    }

                                                    .action {
                                                        position: absolute;
                                                        padding: 0 5px;
                                                        top: 0;
                                                        left: 0;
                                                        width: 100%;
                                                        height: 100%;

                                                        .space-container {
                                                            
                                                        }
                                                    }
                                                }
                                            }
                                        }

                                        &:hover {
                                            .img-mask {
                                                display: block;

                                            }
                                        }


                                    }

                                    .image-name {}

                                    .image-action {
                                        // padding: 5px 5px;
                                        // display: flex;
                                        // align-items: center;
                                        // justify-content: space-between;

                                        // img {
                                        //     display: inline-block;
                                        //     cursor: pointer;
                                        // }

                                    }
                                }


                            }
                        }
                    }
                }

                .page-container {
                    padding: 10px;
                    height: 80px;
                    display: flex;
                    justify-content: center;
                    // padding: 5px 0;
                    padding-bottom: 50px;
                }
            }
        }
    }
}


.cateStyle {
    // width: 100%;
    // display: flex;

    :global {

        .ant-tree-treenode {
            width: 100%;
            display: flex;
            align-items: center;

            .ant-tree-node-content-wrapper {
                width: 100%;
                display: flex;
                align-items: center;

                .ant-tree-title {
                    flex: 1;
                    display: flex;

                    .tree-customer-title {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .closeBtn {
                            display: flex;
                            cursor: pointer;
                            justify-content: center;
                            align-items: center;
                        }
                    }

                }
            }
        }



    }
}